import { Fragment } from "react";
import { Layout, theme } from "antd";
import { Navigate, Routes, Route } from "react-router-dom";
import menus from "@/routers/menus";
import NotFound from '@/views/NotFound'
const { Content } = Layout;
export default function AppMain() {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const renderRoute = (menus) => {
    return menus.map((menu) => {
      if (menu.children) {
        if (menu.index) {
          return (
            <Fragment key={menu.key}>
              <Route index element={<Navigate to={menu.key} />}></Route>
              <Route key={menu.key} path={menu.key} element={menu.element}>
                {renderRoute(menu.children)}
              </Route>
            </Fragment>
          );
        } else {
          return (
            <Route key={menu.key} path={menu.key} element={menu.element}>
              {renderRoute(menu.children)}
            </Route>
          );
        }
      } else {
        if (menu.index) {
          return (
            <Fragment key={menu.key}>
              <Route index element={<Navigate to={menu.key} />}></Route>
              <Route
                key={menu.key}
                path={menu.key}
                element={menu.element}
              ></Route>
            </Fragment>
          );
        }
        return (
          <Route key={menu.key} path={menu.key} element={menu.element}></Route>
        );
      }
    });
  };
  return (
    <Content
      style={{
        margin: "24px 16px",
        padding: 24,
        minHeight: 280,
        background: colorBgContainer,
      }}
    >
      <Routes>
        {renderRoute(menus)}
        <Route path='*' element={<NotFound/>}></Route>
      </Routes>
    </Content>
  );
}
